<template>
	<view class="container">
		<!-- 图片 -->
		<view class="banner">
			<!-- <u-swiper :list="bannerList" height="400" imgMode="widthFix"></u-swiper> -->
			<image src="/static/images/index/banner.jpg" mode="widthFix"></image>
		</view>
		<!-- 主体内容 -->
		<view class="content">
			<!-- 个人信息卡片 -->
			<view class="welcome">
				<u-avatar src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" size='60'></u-avatar>
				<view class="info">
					<view class="name">
						<!-- <u--text text="你好," block="true"></u--text> -->
						<text class="hello">你好</text>
						<u--text mode="name" text="张三三" format="encrypt" block="true"></u--text>
					</view>
					<text>哈哈哈哈哈哈哈哈哈</text>
				</view>
			</view>

			<u-gap height="20" bg-color="#f3f4f6"></u-gap>
			<!-- 二维码 -->
			<view class="qrcode">
				<u-grid :col="2" :border="false">
					<u-grid-item @click="orderFood(0)">
						<u-image src="/static/images/index/service.jpg" width="100" height="100"></u-image>
						<view class="qrcode__text">门店堂食</view>
					</u-grid-item>
					<u-grid-item @click="orderFood(1)">
						<u-image src="/static/images/index/service.jpg" width="100" height="100"></u-image>
						<view class="qrcode__text">外卖派送</view>
					</u-grid-item>
				</u-grid>
			</view>

			<u-gap height="20" bg-color="#f3f4f6"></u-gap>
			<view class="money">
				<u-grid :col="2" :border="false">
					<u-grid-item>
						<view class="money-item">
							<u-image src="/static/images/index/integralShop.png" width="30" height="30"></u-image>
							<view class="money-text">
								<view class="top">积分</view>
								<!-- <view class="money-num">好多神秘好礼等你</view> -->
								<u--text mode="price" text="32.32"></u--text>
							</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="money-item">
							<u-image src="/static/images/index/vipCenter.png" width="30" height="30"></u-image>
							<view class="money-text">
								<view class="top">会员</view>
								<!-- <view class="grid-desc">享受会员的特异功能</view> -->
								<u--text text="732.32"></u--text>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<u-gap height="20" bg-color="#f3f4f6"></u-gap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			orderFood(n) {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: $u-bg-color;

		.banner {
			image {
				width: 100%;
			}
		}

		.content {
			padding: 0 30rpx;

			.welcome {
				position: relative;
				background-color: white;
				padding: 30rpx;
				z-index: 2;
				margin-top: -40rpx;
				border-radius: 14rpx;
				display: flex;

				.info {
					margin-left: 15rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						display: flex;
						justify-content: flex-start;
						// padding-right: 80rpx;

						.hello {
							font-size: 40rpx;
							margin-right: 15rpx;
						}
					}
				}
			}

			.qrcode {
				// position: relative;
				// z-index: 99999;
				// margin: -40rpx 30rpx 0 30rpx;
				padding: 30rpx;
				background-color: white;
				border-radius: 14rpx;

				&__text {
					font-weight: bold;
					font-size: 30rpx;
					margin-top: 15rpx;
				}
			}

			.money {
				padding: 30rpx;
				background-color: white;
				border-radius: 14rpx;

				&-item {
					display: flex;
					width: 100%;
					justify-content: space-around;
					align-items: center;
					padding: 0 50rpx;
					box-sizing: border-box;

				}

				&-text {
					text-align: center;

					.top {
						margin-bottom: 15rpx;
					}
				}
			}
		}
	}
</style>